<template>
	<view class="bt">
		<view class="plr-36 ptb-20 bb">
			<view class="mt-15">
				<view class="size-36 red bold text-center">
					<text>回收品类</text>
				</view>
				<view class="mt-15">
					<view class="content mt-15 flex flex-around">
						<view :class="['ptb-20 size-31 plr-20 ' + (currentIndex == index ? 'border' : '')]"
							v-for="(item, index) of proposed_price" :key="index" @click="onClickItem(index)">
							<view class="flex flex-column">
								<u-image width="100rpx" height="100rpx" :src="item.image"></u-image>
								<text class="gray-3 pt-5">{{ item.name }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="plr-36 ptb-20 bb">
			<view class="mt-15">
				<view class="size-36 red bold text-center">
					<text>今日参考价</text>
				</view>
				<view class="mt-15">
					<view class="content mt-15">
						<checkbox-group @change="checkChange">
							<view v-show="currentIndex === index" v-for="(item, index) of proposed_price" :key="index">
								<label class="uni-list-cell uni-list-cell-pd flex pd-30 bb size-24"
									v-for="(it, i) of item.sons" :key="it.id">
									<view class="flex_l">
										<checkbox :value="it.id" color="#0000ff" style="transform:scale(0.7)" />
										<view>
											{{ it.name }}{{ it.desc ? '【' + it.desc + '】' : '' }}
										</view>
									</view>
									<view class="flex_r">
										￥{{ it.custom_price ? it.custom_price : 0 + '【未设置】' }}/{{ it.unit }}
									</view>
								</label>
							</view>
						</checkbox-group>
					</view>
				</view>
			</view>
		</view>
		<view class="w100" style="height: 20rpx;background: #f8f8f8;"></view>
		<view class="ptb-20">
			<view class="plr-36 size-34 bold">
				结算信息
			</view>
			<view class="mt-15">
				<view class="pd-30 bb" v-for="(item, index) of data" :key="index">
					<view class="flex">
						<view class="flex_l">
							{{ item.name }} ￥{{ item.custom_price ? item.custom_price : 0 }}/{{ item.unit }}
						</view>
						<view class="flex_r">
							<u-input v-model="item.number" type="digit" @input="numberChange" />
						</view>
					</view>
				</view>
			</view>
			<view class="mt-15">
				<view class="pd-30 text-center">
					<view class="mt-10">总金额：<text class="red">￥{{total_money}}</text></view>
					<view class="mt-10">总积分：{{total_integral}}<text style="font-size: 24rpx;">（￥1.00 =
							{{integral_proportion / 100}}积分）</text></view>
					<view class="mt-10 red" style="font-size: 24rpx;">注意：铜类不赠送积分</view>
				</view>
			</view>
		</view>
		<view class="w100" style="height: 20rpx;background: #f8f8f8;"></view>
		<view style="height: 300rpx;"></view>
		<view class="fixed-bottom plr-36 bg-white flex" style="box-shadow: 0px -2px 6px rgba(238, 238, 238, 0.68);">
			<view></view>
			<view class="bold bg-yellow ptb-9 plr-20 radius-10 white" @click="subApi">
				确定结算
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	var pos = require('./../utils/pos.js')
	export default {
		data() {
			return {
				currentIndex: 0,
				items: [],
				proposed_price: [],
				sons: [],
				data: [],
				total_money: 0,
				total_integral: 0,
				info: {},
				integral_proportion: 100,
				points_ignored: [],
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad(option) {
			this.init(option.id ? option.id : 0)
		},
		methods: {
			init(id) {
				this.$http('/api/order/recyclerdetail', {
					id: id
				}).then(data => {
					this.info = data;
				}).catch((err) => {
					setTimeout(function() {
						uni.navigateBack({});
					}, 3000);
				});
				this.$http('/api/order/init', {}).then(data => {
					this.proposed_price = data.proposed_price;
					this.integral_proportion = data.proportion;
					this.points_ignored = data.points_ignored;
					this.items = [];
					for (let item of this.proposed_price) {
						this.items.push(item.name);
						this.sons = this.sons.concat(item.sons);
					}
				});
			},
			numberChange(e) {
				let number = isNaN(e) ? 0 : parseFloat(parseFloat(e).toFixed(2));
				this.total_money = 0;
				this.total_integral = 0;
				for (let item of this.data) {
					if (item.id === e[0]) {
						item.number = number;
					}
					this.total_money += item.number * (item.custom_price ? item.custom_price : 0);
					if (this.points_ignored.indexOf(item.id) === -1) {
						this.total_integral += item.number * (item.custom_price ? item.custom_price : 0) / 100 * this
							.integral_proportion;
					}
				}
				this.total_money = parseFloat(this.total_money.toFixed(2));
				this.total_integral = parseFloat(this.total_integral.toFixed(2));
			},
			checkChange(r) {
				this.data = [];
				for (let item of this.sons) {
					if (r.detail.value.indexOf(item.id.toString()) > -1) {
						item.number = item.number ? item.number : '0';
						this.data.push(item);
					}
				}
			},
			onClickItem(index) {
				this.currentIndex = index;
			},
			subApi() {
				let _this = this;
				let params = {
					id: _this.info.id,
					recovery_ids: [],
					numbers: []
				};

				for (let item of this.data) {
					params.recovery_ids.push(item.id);
					params.numbers.push(item.number);
				}

				if (!params.recovery_ids.length || !params.numbers.length) {
					uni.showToast({
						title: '请选择结算物品',
						icon: 'error',
						duration: 2000
					});
					return false;
				}

				uni.showModal({
					title: '确定要结算？',
					content: '用户所得金额：￥' + _this.total_money,
					success: function(res) {
						if (res.confirm) {
							_this.$http('/api/order/settlement', params, "POST").then(data => {
								console.log(_this.$bluetooth.check_donnect_status())
								if (!_this.$bluetooth.check_donnect_status()) {
									return uni.showModal({
										title: '结算成功',
										content:'未连接打印机，请连接蓝牙后，在订单详情打印小票',
										icon: 'success',
										duration: 3000,
										success() {
											setTimeout(function() {
												uni.navigateBack({});
											}, 3000);
										}
									});
								}
								uni.showToast({
									title: '结算成功，尝试打印小票中',
									icon: 'success',
									duration: 3000
								});
								_this.$http('/api/order/recyclerdetail', {
									id: _this.info.id
								}).then(data => {
									_this.printorder(data)
								})

							})
						}
					}
				});
			},
			printorder(info) {
				if (!this.$bluetooth.check_donnect_status()) {
					return uni.navigateTo({
						url: '/pages/order/bluetooth',
						fail(res) {
							console.log(res)
						}
					})
				}
				uni.showToast({
					title: '正在打印',
					duration: 4000,
				})
				pos.AddPrintQueue('InitPos'); // 初始化蓝牙打印机 [27,64]
				pos.PrintTitle(" 废为宝回收凭证"); //打印标题  
				pos.PrintNameValue('订单编号: ', info.order_no);
				pos.PrintText("回收员: " + this.userInfo.nickname + ' (' + this.userInfo.id + ')  ' + this.userInfo
					.mobile); //打印标题  
				pos.PrintMiddleText('--------------------------------------');
				pos.PrintNameValue('联系人: ', info.username);
				pos.PrintNameValue('联系电话: ', info.mobile);
				pos.PrintNameValue('联系地址: ', info.address + info.address + info.address);
				pos.PrintNameValue('预估重量: ', info.weight_type_text);
				pos.PrintNameValue('下单时间: ', info.createtime_text);
				pos.PrintNameValue('预约时间: ', info.scheduledtime_text);
				pos.PrintNameValue('接单时间: ', info.accepttime_text);
				pos.PrintMiddleText('--------------------------------------');
				pos.PrintText("品名    单价       数量         小计");
				for (let key in info.details) {
					var item = info.details[key]
					pos.PrintText(item.title);
					pos.PPP(item.price, item.number + item.unit, item.total_price);
				}
				pos.PrintMiddleText('--------------------------------------');
				pos.PrintNameValue('订单总金额: ¥', info.total_money);
				pos.PrintNameValue('订单总积分: ', info.total_integral);
				pos.PrintNameValue('结算时间: ', info.successtime_text);
				pos.PrintMiddleText('--------------------------------');
				pos.PrintText("谢谢您的信任,期待我们的下次相遇!"); //打印标题
				pos.PrintJumpLines(3);
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.fixed-bottom {
		height: 120rpx;
	}

	.border {
		border: 4rpx solid green;
		border-radius: 10rpx;
	}
</style>